<template>
    <div class="goodsinfo-container">

        <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
          <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
       <!-- 商品轮播图区域 -->
       <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
				</div>
			</div>
		</div>
       <!-- 商品购买区域 -->    
        <div class="mui-card">
			<div class="mui-card-header">{{goodsinfo }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
                    <p class="price">
                        市场价:<del>￥{{goodsinfo.market_price}}}</del>&nbsp;&nbsp;销售价:<span class="now_price">￥{{goodsinfo.sell_price}}</span>  
                    </p>
                    <p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                    </p>
				</div>
			</div>
			
		</div>

       <!-- 商品参数区域 -->
       <div class="mui-card">
				<div class="mui-card-header">商品的参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{goodsinfo.goods_no}}</p>
						<p>库存情况:{{goodsinf.stock_quantity}}件</p>
						<p>上架时间:{{goodsinfo.add_time | dataFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                    <br>
                    <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
                </div>
			</div>
    </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default{
    data(){
        return{
            id:this.$route.params.id,
            lunbotu:[],//轮播图数据
            goodsinfo:{},//获取到商品的信息
            ballFlag:false,//控制小球隐藏和现实的功能
            selectedCount:1 //保存选中的商品数量，默认1
        }

    },
    created(){
        this.getLunbotu();
    },
    methods:{
        getLunbotu(){
            this.$http.get('api/gethumimages'+this.id).then(result=>{
              if(result.body.status===0){
                  this.lunbotu=this.result.body.message;
              }
            })
        },
        getGoodsInfo(){
            this.$http.get('api/goods/getinfo' +this.id).then(result=>{
                if(result.body.status===0){
                   this.goodsinfo=this.body.message;
                }
            })
        },
        goDesc(id){
            // 点击使用编程模式导航跳转到图文介绍页面
            this.$router.push({name:"/home/goodsdesc",params:{id}})
        },
        goComment(id){
          this.$router.push({name:"/home/goodscomment",params:{id}})
        },
        addToShopCar(){
            // 添加到购物车
            this.ballFlag=!this.ballFlag;
            // {id:商品的id ，count：购买的数量，商品price：商品的单价,selected:false}
           var goodsinfo={
               id:this.id,
               count:selectedCount,
               price:this.goodsinfo.sell_price,
               selected:true};
            //    调用store中的 mutaions 来将商品加入购物车
               this.$store.commit('addToCar',goodsinfo)
        },
        beforeEnter(el){
            el.style.transfrom="translate(0,0)"
        },
        enter(el,done){
         el.offsetWidth;



        //  获取小球的在页面中的位置
        const ballPosition=this.$refs.ball.getBoundingClientRect()
        const badgePosition=document
        .getElementById("badge")
        .getBoundingClientRect(); 
        const xDist=ballPosition.left-ballPosition.left;
        const yDist=badgePosition.top-ballPosition.top
         el.style.transfrom="translate($(xDist),$(yDist),)"
         el.style.transition="all 1s cubic-bezier(.4,-0.3,1,.68)";
         done()
        },
        afterEnter(el){
           this.ballFlag=!ballFlag
        },
        getSelectedCount(count){
            // 当子组件把 选中的数量传递非父组件 把选中的值保存到data上
          this.selectedCount=count;
          console.log('父组件拿到值:'+this.selectedCount);
        }
        

    },
    components:{
        swiper,
        numbox
    }
    
}
</script>
<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  .now_price{
      color: red;
      font-size: 16px;
      font-weight: bold;
  }
.mui-card-footer{
    display: block;
    button{
       margin: 10px 0;
    }
}
}
.ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color:red;
    position: absolute; 
    z-index: 99;
    top:390px;
    left:146px;
    
}

</style>

